// 其他材料
<template>
  <a-spin :spinning="loading" class="material_div">
    <a-table :columns="columns" :data-source="materialList" rowKey="id" :pagination="false" :loading="loading" bordered>
      <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
      <div slot="name" slot-scope="text, record" class="overBox" style="text-align: left">
        <span v-if="record.require == 3200" style="color: red">*</span>
        <a-input
          ref="refName"
          v-if="record.editable"
          v-model="record.name"
          placeholder="请输入材料名称"
          :class="{ 'red-border': record.warn }"
        />
        <span v-else>{{ text }}</span>
      </div>
      <div slot="describe" slot-scope="text, record" class="overBox" style="text-align: left">
        <a-input v-if="record.editable" v-model="record.describe" placeholder="请输入材料说明" />
        <a-popover v-else>
          <template slot="content">
            <div style="max-width: 900px">{{ record.describe }}</div>
          </template>
          <div class="line">{{ record.describe }}</div>
        </a-popover>
      </div>
      <span slot="fileList" slot-scope="list, record, rIndex" style="text-align: left">
        <div v-if="list && list.length">
          <a v-for="item in list" :key="item.id" class="file-css">
            <div style="width: 60%; display: flex; align-items: center">
              <span @click="openReview(item)" :title="item.name" class="beyond_hiding">
                <a-icon v-if="item.isread == 3200" type="folder-open" theme="filled" />
                <a-icon v-else type="folder" theme="filled" />
                {{ item.name }}
              </span>
            </div>
            <div style="width: 40%; display: flex; align-items: center">
              <div class="button_flex cursor_pointer" @click="download(item)">
                <a-icon type="download" style="margin-right: 8px" />
                <a class="download_div">下载</a>
              </div>
              <a-divider type="vertical" />
              <a-popconfirm title="确定删除吗？" @confirm="() => removeFile(item, record)">
                <div class="button_flex cursor_pointer">
                  <a-icon type="delete" style="margin-right: 8px" />
                  <a class="download_div">删除</a>
                </div>
              </a-popconfirm>
            </div>
          </a>
        </div>
        <div v-else>未上传附件</div>
      </span>
      <span slot="operation" slot-scope="text, record">
        <div
          style="display: flex; align-items: center; flex-direction: row; justify-content: center; margin-right: 10px"
        >
          <div v-if="record.ismanual == 3200 && record.editable" class="button_flex cursor_pointer">
            <div>
              <a-icon type="save" style="margin-right: 8px; color: #1890ff" />
              <a @click="handleSave(record, index)">保存</a>
            </div>
            <a-divider type="vertical" />
            <a-popconfirm title="确定取消修改吗？" @confirm="() => handleCancle(record, index)">
              <a-icon type="delete" style="margin-right: 8px; color: #1890ff" />
              <a>取消</a>
            </a-popconfirm>
          </div>
          <div v-if="!record.editable" class="cursor_pointer" @click="handleUpload(record, index)">
            <a-icon type="upload" style="margin-right: 8px; color: #1890ff" />
            <a>上传</a>
          </div>
          <!-- <a v-if="!record.editable" @click="handleUpload(record, index)">上传</a> -->
          <div v-if="record.ismanual == 3200 && !record.editable" class="button_flex">
            <a-divider type="vertical" />
            <div>
              <a-icon type="edit" style="margin-right: 8px; color: #1890ff" />
              <a @click="handleEdit(record, index)" class="cursor_pointer">编辑</a>
            </div>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗？" @confirm="() => handleRemove(record, index)">
              <div class="button_flex cursor_pointer">
                <a-icon type="delete" style="margin-right: 8px; color: #1890ff" />
                <a class="download_div">删除</a>
              </div>
            </a-popconfirm>
          </div>
        </div>
      </span>
    </a-table>

    <MultiUploadBasic ref="multiUploadBasic" @importFileFun="importFileFun"></MultiUploadBasic>
  </a-spin>
</template>

<script>
import { queryMatterAttachList, saveApl_matter_attach } from '@/api/apply/apl_matter_attach'
import { downloadFileWithUrl } from '@/utils/util'
import { minioUpload, minioUploadMore } from '@/api/base/file'
import { saveApl_attachment, delApl_attachment } from '@/api/apply/apl_attachment'
import { nanoid } from 'nanoid'
export default {
  name: 'OtherMaterials',
  props: {
    applyid: {
      // 申请id
      type: String,
      required: true
    }
  },
  data() {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'serial',
          key: 'serial',
          align: 'center',
          width: '70px',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '材料名称',
          dataIndex: 'name',
          key: 'name',
          align: 'center',
          width: '30%',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '材料说明',
          dataIndex: 'describe',
          key: 'describe',
          align: 'center',
          width: '30%',
          scopedSlots: { customRender: 'describe' }
        },
        {
          title: '附件信息',
          dataIndex: 'fileList',
          key: 'fileList',
          align: 'center',
          scopedSlots: { customRender: 'fileList' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '220px',
          // fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      materialList: [],
      loading: false,
      selectRecord: {},
      materialListBak: []
    }
  },
  components: {
    MultiUploadBasic: () => import('@/views/materials/multiUpload/MultiUploadBasic.vue')
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.queryList()
    },
    async queryList() {
      this.loading = true
      const res = await queryMatterAttachList({ applyid: this.applyid }).finally(() => {
        this.loading = false
      })
      if (res.data && res.data.length) {
        this.materialList = res.data
        this.materialList.forEach(el => {
          el.editable = false
        })
        this.materialListBak = JSON.parse(JSON.stringify(this.materialList))
      }
      let btnShow = true
      if (this.materialList.length == 0) {
        btnShow = false
      }
      this.$emit('changeShow', btnShow)
    },
    openReview(item) {
      this.$emit('openReview', { selectData: item })
    },
    download(item) {
      if (item) {
        downloadFileWithUrl(item.url, item.name)
      }
    },
    /**
     * 保存文件
     * @param {*} item
     */
    async saveAttachment(item) {
      const apl_attachment_id = this.applyid + item.id
      const res2 = await saveApl_attachment({
        id: apl_attachment_id,
        attachmentid: item.id,
        applyid: this.applyid,
        matter_attachid: this.selectRecord.id,
        isread: 3201
      })
      if (res2.code == 0) {
        const material = this.materialList.filter(m => m.id == this.selectRecord.id)
        if (material) {
          material.forEach(v => {
            if (!v.fileList) {
              v.fileList = []
            }
            item.name = item.filename
            item.attachmentid = item.id
            item.uid = apl_attachment_id
            item.status = 'done'
            v.fileList.push(item)
          })
        }
      }
    },
    async removeFile(file, record) {
      const res = await delApl_attachment(file.id)
      if (res.code == 0) {
        // 对应删除一条记录
        record.fileList = record.fileList.filter(item => item.id != file.id)
        this.queryList()
      } else {
        reject()
      }
    },
    handleUpload(record, index) {
      this.selectRecord = record
      this.$refs.multiUploadBasic.importVisible = true
    },

    handleAdd() {
      this.materialList.push({
        id: this.applyid + nanoid(),
        applyid: this.applyid,
        sortnum: this.materialList.length + 1,
        name: '',
        require: 3201,
        maxnum: 9,
        describe: '自定义材料',
        filedown: 3201,
        ismanual: 3200,
        deleted: 0,
        fileList: [],
        editable: true,
        warn: false,
        warn2: false
      })
    },

    /**
     * 确定保存导入数据
     */
    async importFileFun(importFileList) {
      console.log('importFileList', importFileList)
      const files = []
      importFileList.forEach(item => {
        files.push(item)
      })
      this.$refs.multiUploadBasic.loading = true
      const res = await minioUploadMore(files).finally(() => {
        this.$refs.multiUploadBasic.loading = false
      })
      if (res.code == 0) {
        const attachs = res.data
        for (let i = 0; i < attachs.length; i++) {
          await this.saveAttachment(attachs[i])
        }
        this.queryList()
        this.$message.success('上传成功')
        this.$refs.multiUploadBasic.handleCancel()
      } else {
        this.$message.error(res.msg)
      }
    },
    async handleSave(record, index) {
      const res = await saveApl_matter_attach(record)
      if (res.code == 0) {
        this.queryList()
      }
    },
    handleCancle(record, index) {
      const materialBak = this.materialListBak.find(item => record.id === item.id)
      if (materialBak) {
        for (let index = 0; index < this.materialList.length; index++) {
          if (this.materialList[index].id === record.id) {
            this.materialList[index].name = materialBak.name
            this.materialList[index].describe = materialBak.describe
            this.materialList[index].editable = false
          }
          this.$set(this.materialList, index, this.materialList[index])
        }
      } else {
        this.materialList = this.materialList.filter(item => record.id !== item.id)
      }
    },
    handleEdit(record, index) {
      record.editable = true
      for (let index = 0; index < this.materialList.length; index++) {
        if (this.materialList[index].id == record.id) {
          this.$set(this.materialList, index, record)
        }
      }
    },
    async handleRemove(record, index) {
      record.deleted = 1
      const res = await saveApl_matter_attach(record)
      if (res.code == 0) {
        this.materialList = this.materialList.filter(el => el.id !== record.id)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.file-css {
  /* display: block; */
  display: flex;
  margin-bottom: 5px;
  word-break: break-all;
  flex-direction: row;
  justify-content: space-between;
}
.line {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.beyond_hiding {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.download_div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.button_flex {
  display: flex;
  align-items: center;
}
.material_div {
  ::v-deep .ant-table-column-title {
    font-weight: bold;
  }
}
</style>
